<template>
  <view class="page">
    <view class="search-bar">
      <u-dropdown ref="uDropdown" class="dropdown" :activeColor="dropdown.activeColor"
        :borderBottom="dropdown.borderBottom" :close-on-click-mask="dropdown.mask">
        <u-dropdown-item @change="menuTypeChange" v-model="query.menuCode" :title="dropdown.menuTypeTitle"
          :options="dropdown.menuTypeOption"></u-dropdown-item>
      </u-dropdown>
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入学号/课程名称" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <!-- <view class="search container">
      <view class="dropdown-container" v-if="dropdown.menuTypeOption.length>1">
        <u-dropdown :close-on-click-mask="dropdown.mask" ref="uDropdown" :activeColor="dropdown.activeColor"
          :borderBottom="dropdown.borderBottom">
          <u-dropdown-item @change="menuTypeChange" v-model="query.menuCode" :title="dropdown.menuTypeTitle"
            :options="dropdown.menuTypeOption"></u-dropdown-item>
        </u-dropdown>
      </view>
      <view class="search-container">
        <u-search v-model="keywords" @custom="search" @search="search" height="80" placeholder="请输入学号/课程名称"></u-search>
      </view>
    </view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list">
        <view v-for="(item, index) in list" :key="index" class="card-item">
          <view class="card-item-hd">
            <view class="card-title" :class="item.show ? '' : 'ellipsis'">{{item.kcmc}}</view>
            <view v-show="!item.show" class="tags">
              <view class="tag">{{item.xh}}</view>
              <view class="tag">{{item.xn}}</view>
              <view class="tag">{{item.kcmc}}</view>
            </view>
          </view>
          <view v-show="item.show" class="card-item-bd">
            <view class="card-desc">
              <text class="label">学号：</text>
              <text class="primary">{{item.xh || '-'}}</text>
            </view>
            <view class="card-desc">
              <text class="label">课程代码：</text>
              <text class="value">{{item.kch || '-'}}</text>
            </view>
            <view class="card-desc">
              <text class="label">课程名称：</text>
              <text class="primary">{{item.kcmc || '-'}}</text>
            </view>
            <view class="card-desc">
              <text class="label">学年：</text>
              <text class="primary">{{item.xn || '-'}}</text>
            </view>
            <view class="card-desc">
              <text class="label">学期码：</text>
              <text class="value">{{item.xqm || '-'}}</text>
            </view>
            <view class="card-desc">
              <text class="label">课程类别名：</text>
              <text class="value">{{item.kclbm || '-'}}</text>
            </view>
          </view>
          <view class="card-item-ft" :class="item.show ? 'up' : ''" @click="item.show = !item.show">
            {{item.show ? '收起全部' : '展开全部'}}
            <image src="../../../static/images/icon_circle_arrow_down.png" mode=""></image>
          </view>
        </view>
      </view>
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  import JsCollapseItem from '@/components/js-collapse-item/js-collapse-item.vue'
  export default {
    components: {
      JsCollapseItem
    },
    data() {
      return {
        keywords: '',
        query: {
          current: 1,
          size: 10
        },
        swiperCurrent: 0,
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        queryType: 'jwBzksKcxx2Apps',
        queryTypeList: [],
        dropdown: {
          borderBottom: false,
          activeColor: '#2979ff',
          mask: true,
          menuTypeOption: [],
          menuTypeTitle: '类型',
        },
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
      };
    },
    onLoad() {
      this.$u.api.menu.getDictByCode({
        menuCode: this.queryType
      }).then(res => {
        if (!res.data || res.data.length == 0) {
          return;
        }
        if (res.data.length > 0) {
          this.queryTypeList = res.data;
          this.query.menuCode = res.data[0].code;
          this.dropdown.menuTypeTitle = res.data[0].name;
          let detaiList = [];
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.name,
              'value': item.code
            });
          })
          this.dropdown.menuTypeOption = detaiList;
        }
        this.loadList();
      })
    },
    computed: {

    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      getTitle(title, t) {
        let len = 14;
        if (title.length > len) {
          title = title.substring(0, len);
        }
        title = title + " | " + this.formatTime(t);
        return title;
      },
      formatTime(t) {
        return $time.dateFormat(new Date(t.replace(/-/g, '/')), "{Y}-{MM}-{DD}");
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.query.keywords = value;
        this.loadList();
      },

      loadList() {
        this.$u.api.jiaoxue.jwBzksKcxxList(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.data.records).map(_ => {
            return {
              ..._,
              show: false
            }
          });
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      change(index) {
        this.list = [];
        this.query.current = 0;
        this.query.menuCode = this.queryTypeList[this.swiperCurrent].code;
        this.loadList();
      },
      initMenuType() {
        this.$u.api.dictBizData({
          code: 'mis_talk_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.dropdown.talkTypeOption = detaiList;
        });
      },
      menuTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.menuCode = index
        this.dropdown.menuTypeTitle = (index === '' ? '类型' : this.getOptionLabel(this.dropdown.menuTypeOption, index));
        this.loadList()
      },
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;

    .dropdown {
      position: absolute;
      top: 0;
      width: 160rpx;
      height: 96rpx;
      font-size: 28rpx;
      color: #333;

      /deep/ .u-dropdown__menu {
        height: 96rpx !important;
      }

      &::after {
        content: '';
        position: absolute;
        top: 28rpx;
        right: 0;
        display: inline-block;
        width: 1px;
        height: 40rpx;
        z-index: 9;
        background: #dadada;
      }
    }
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    padding-left: 160rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      // left: 21rpx;
      left: 181rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .dropdown {
    height: 80rpx;
    background: #fff;

    &+.scroll-list {
      height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 80rpx);
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
    transition: all .2s linear;
  }

  .card-item-hd {
    padding: 24rpx 32rpx;

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8rpx;
    }

    .tag {
      display: inline-block;
      border-radius: 8rpx;
      padding: 0 24rpx;
      margin-top: 8rpx;
      margin-right: 8rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #3989FC;
      background: rgba(57, 137, 252, .1);
    }
  }

  .card-item-bd {
    border-top: 1px solid #f7f7f7;
    padding: 24rpx 32rpx;
  }

  .card-item-ft {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 32rpx 24rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #3989FC;

    &.up image {
      transform: rotate(-180deg);
    }

    image {
      width: 24rpx;
      height: 24rpx;
      margin: 0 8rpx;
    }
  }

  .card-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }

  .card-desc {
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    &+.card-desc {
      margin-top: 16rpx;
    }

    .title {
      margin-right: 16rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
    }

    .label {
      font-weight: 700;
      color: #333;
    }

    .primary {
      color: #3989FC;
    }
  }

  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .multiple-ellipsis {
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /deep/ .u-dropdown__content__mask {
    opacity: 0;
  }
</style>